<template>
  <div class="about-left-nav">
    <ul>
      <li v-for="item in navList" :key="item.title" @click="changeId(item)">
        <router-link v-bind:to="'/home/about/'+item.id">{{item.title}}</router-link>
        <span><svg-icon icon-class="right"></svg-icon></span>
      </li>
<!--      <li><router-link to="#">资质荣誉</router-link><span><svg-icon icon-class="right"></svg-icon></span></li>-->
<!--      <li><router-link to="#">企业文化</router-link><span><svg-icon icon-class="right"></svg-icon></span></li>-->
<!--      <li><router-link to="#">联系我们</router-link><span><svg-icon icon-class="right"></svg-icon></span></li>-->
    </ul>
  </div>
</template>

<script>
export default {
  name: 'left-nave',
  props: {
    navList: Array
  },
  methods: {
    changeId(item) {
      this.$emit('fatherMethods', item)
    }
  }
}
</script>

<style lang="scss">
  .about-left-nav{
    width: 325px;
    ul{
      li{
        margin: 0px 20px;
        border-bottom:1px solid #e8e3e3 ;
        position: relative;
        &:first-child{
          border-top: 1px solid #e8e3e3;
        }
        &:hover{
          background: #134B9F;
          a{
            color: #ffffff;
          }
          span{
            svg{
              color: #ffffff;
            }

          }
        }
        a{
          /*color: #134B9F;*/
          color: #363636;
          text-align: center;
          display: block;
          padding: 15px 0px;
          font-size: 16px;
        }
        span{
          display: inline-block;
          position: absolute;
          right: 10px;
          top: 18px;
          svg{
            font-size: 20px;
            color: #363636;
          }
        }
      }
    }
  }
</style>
